<template>
<div class="">
    <div class="pr10">
        <div class="analyItem">
            <p class="analyItemTit tx-center">状态</p>
            <div class="analyItemCon">
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
    </div>
    <div class="thinScroll pr10" v-scrollHeight="84">
        <router-link tag="div" :to="routerPath('processOrder')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">订单</p>
            <div class="analyItemCon">
               <p class="col-md-4">
                    <span class="pr8 cLightGray">项订完成率</span>
                    <span>{{(completionRate).toFixed(2)}}%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">标准</span>
                    <span>55%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">差额</span>
                    <span>{{(55 - completionRate).toFixed(2)}}%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">监订完成率</span>
                    <span>{{surRate.toFixed(2)}}%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">标准</span>
                    <span>90%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">差额</span>
                    <span>{{(90 - surRate).toFixed(2)}}%</span>
                </p>
                <span v-if="surRate >= 90" class="circlemark circlemark-green">优</span>
                <span v-else-if="surRate < 90 &&  surRate >= 75 " class="circlemark circlemark-lightGreen">良</span>
                <span v-else-if="surRate < 75 &&  surRate >= 60 " class="circlemark circlemark-yellow">中</span>
                <span v-else class="circlemark circlemark-lightRed">差</span>
            </div>
        </router-link>
        <!-- <router-link tag="div" :to="routerPath('processDuration')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">工期</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="pr8 cLightGray">在施</span>
                    <span>{{propor}}</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">延期</span>
                    <span>{{proportion.Delay}}</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">延期率</span>
                    <span>{{proportion.Delay == 0 ? 0 : (proportion.Delay / propor * 100).toFixed(2)}}%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">超期</span>
                    <span>{{proportion.Overdue}}</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">超期率</span>
                    <span>{{proportion.Overdue == 0 ? 0 : (proportion.Overdue / propor * 100).toFixed(2)}}%</span>
                </p>
                <span class="circlemark circlemark-yellow">中</span>
            </div>
        </router-link> -->
        <router-link tag="div" exact :to="{path:routerPath('processDuration'),query:{proportion: struction}}" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">工期</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="pr8 cLightGray">超期率</span>
                    <span>{{struction.Overdue == 0 ? 0 : (struction.Overdue / proporList * 100).toFixed(2)}}%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">标准</span>
                    <span>0.00%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">差额</span>
                    <span>{{0 - (struction.Overdue == 0 || struction.Overdue == undefined ?  0 : ((struction.Overdue / proporList * 100).toFixed(2)))}}%</span>
                </p>
                <span v-if="struction.Overdue == 0" class="circlemark circlemark-green">优</span>
                <span v-else class="circlemark circlemark-lightRed">差</span>
            </div>
        </router-link>
        <router-link tag="div" :to="routerPath('processMaterial')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">材料</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="pr8 cLightGray">材料配比</span>
                    <span>{{(materialAllData.matProportioning * 100).toFixed(2)}}%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">标准</span>
                    <span>95%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">差额</span>
                    <span>{{(95 - materialAllData.matProportioning * 100).toFixed(2)}}%</span>
                </p>
                <span v-if="materialAllData.matProportioning * 100 >= 95" class="circlemark circlemark-green">优</span>
                <span v-else-if="materialAllData.matProportioning * 100 < 95 &&  materialAllData.matProportioning * 100 >= 85 " class="circlemark circlemark-lightGreen">良</span>
                <span v-else-if="materialAllData.matProportioning * 100 < 85 &&  materialAllData.matProportioning * 100 >= 75 " class="circlemark circlemark-yellow">中</span>
                <span v-else class="circlemark circlemark-lightRed">差</span>
            </div>
        </router-link>
        <router-link tag="div" :to="routerPath('processLabor')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">人工</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="pr8 cLightGray">工程量分配率</span>
                    <span>{{wokerRing.distributionRate.toFixed(2)}}%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">标准</span>
                    <span>70%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">差额</span>
                    <span>{{(70 - wokerRing.distributionRate).toFixed(2)}}%</span>
                </p>
                <span v-if="wokerRing.distributionRate >= 70" class="circlemark circlemark-green">优</span>
                <span v-else-if="wokerRing.distributionRate < 70 &&  wokerRing.distributionRate >= 50 " class="circlemark circlemark-lightGreen">良</span>
                <span v-else-if="wokerRing.distributionRate < 50 &&  wokerRing.distributionRate >= 30 " class="circlemark circlemark-yellow">中</span>
                <span v-else class="circlemark circlemark-lightRed">差</span>
            </div>
        </router-link>
        <router-link tag="div" :to="routerPath('processProcess')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">工艺</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="pr8 cLightGray">上传率</span>
                    <span>{{wokerCarft.craftUploadCount == 0 ? 0 : (wokerCarft.craftUploadCount / wokerCarft.craftOrderCount * 100).toFixed(2)}}%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">标准</span>
                    <span>100%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">差额</span>
                    <span>{{wokerCarft.craftUploadCount == 0 ? 0 : 100 - (wokerCarft.craftUploadCount / wokerCarft.craftOrderCount * 100).toFixed(2)}}%</span>
                </p>
                <span v-if="wokerCarft.craftUploadCount >= 100" class="circlemark circlemark-green">优</span>
                <span v-else-if="wokerCarft.craftUploadCount < 100 &&  wokerCarft.craftUploadCount >= 75 " class="circlemark circlemark-lightGreen">良</span>
                <span v-else-if="wokerCarft.craftUploadCount < 75 &&  wokerCarft.craftUploadCount >= 50 " class="circlemark circlemark-yellow">中</span>
                <span v-else class="circlemark circlemark-lightRed">差</span>
            </div>
        </router-link>
        <div class="analyItem">
            <p class="analyItemTit tx-center">摄像头</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="pr8 cLightGray">安装率</span>
                    <span>0%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">在线率</span>
                    <span>0%</span>
                </p>
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </div>
        <!-- <router-link tag="div" :to="routerPath('processCamera')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">摄像头</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="pr8 cLightGray">安装率</span>
                    <span>0%</span>
                </p>
                <p class="col-md-4">
                    <span class="pr8 cLightGray">在线率</span>
                    <span>0%</span>
                </p>
                <span class="circlemark circlemark-lightRed">差</span>
            </div>
        </router-link> -->
    </div>
    <div class="pr10">
        <router-link tag="div" :to="routerPath('processProcessing')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">处理</p>
            <div class="analyItemCon">

            </div>
        </router-link>
    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { findCompletedProportion, getMaterialProportioningByCompany, getCompletedEngineering, getCompletedCarft, findCompletedConstruction } from '../Resources/Api'
export default {
    data () {
        return {
            parmasExample: {
                name: '',
                age: ''
            },
            proportion: {}, // 项目经理 订单
            propor: 0, // 订单数量
            storeData: {}, // 材料
            factoryData: {}, // 厂家
            factoryStoreData: {}, // 厂店
            wokerRing: {}, // 工人
            wokerCarft: {},
            materialAllData: {},
            struction: {},
            proporList: 0,
            completionRate: 0, // 项顶完成率
            surRate: 0
        }
    },
    created () {
        this.findCompletedProportion()// 项目经理 订单
        this.getMaterialProportioningByCompany() // 材料
        this.getCompletedEngineering()// 工人
        this.getCompletedCarft() // 工艺
        this.findCompletedConstruction() // 工期
    },
    computed: {
        ...mapGetters(['userInfo', 'leftInfo'])
    },
    methods: {
        getCompletedCarft () {
            getCompletedCarft({
                areaId: this.leftInfo.u_diqu
            }).then(res => {
                if (res.data.StatusCode === 1) {
                    this.wokerCarft = res.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        },
        findCompletedConstruction () {
            findCompletedConstruction({
                dqId: this.leftInfo.u_diqu
            }).then(res => {
                if (res.data.statusCode === 1) {
                    this.struction = res.data.Body
                    this.proporList = res.data.Body.orderList.length
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getCompletedEngineering () {
            getCompletedEngineering({
                areaId: this.leftInfo.u_diqu
            }).then(res => {
                if (res.data.StatusCode === 1) {
                    this.wokerRing = res.data.Body
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getMaterialProportioningByCompany () {
            getMaterialProportioningByCompany({
                companyID: this.leftInfo.u_diqu
            }).then(res => {
                if (res.data.statusCode === 0) {
                    this.storeData = res.data.body.storeData
                    this.factoryData = res.data.body.factoryData
                    this.factoryStoreData = res.data.body.factoryStoreData
                    this.materialAllData = res.data.body.materialAllData
                }
            }).catch(err => {
                console.log(err)
            })
        },
        findCompletedProportion () {
            var obj = {
                dqId: this.leftInfo.u_diqu
            }
            findCompletedProportion(obj).then(res => {
                if (res.data.statusCode === 1) {
                    this.proportion = res.data.Body.orderList
                    var completionRate = 0
                    var surRate = 0
                    this.proportion.forEach(item => {
                        completionRate += item.completionRate // 项顶 完成率
                        surRate += item.surRate * 100
                    })
                    this.surRate = surRate === 0 ? 0 : surRate / this.proportion.length
                    this.completionRate = completionRate === 0 ? 0 : completionRate / this.proportion.length
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        }
    },
    watch: {
        leftInfo () {
            this.findCompletedProportion()// 项目经理 订单
            this.getMaterialProportioningByCompany() // 材料
            this.getCompletedEngineering()// 工人
            this.getCompletedCarft() // 工艺
            this.findCompletedConstruction() // 工期
        }
    }
}
</script>
